<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>requestAnimationFrame</title>
    <style>
      body {
        box-sizing: border-box;
      }

      .box1,
      .box2 {
        position: absolute;
        width: 160px;
        height: 160px;
        line-height: 160px;
        text-align: center;
        color: #fff;
      }

      .box1 {
        top: 40px;
        background: red;
      }

      .box2 {
        top: 210px;
        background: green;
      }
    </style>
  </head>

  <body>
    <button class="btn">👉 let's go!</button>
    <div class="box1">定时器动画</div>
    <div class="box2">请求动画帧</div>
  </body>
  <script>
    return
    // 动画思路：不断修改dom元素的left值，使其运动起来（动画）
    let box1 = document.querySelector(".box1")
    let box2 = document.querySelector(".box2")

    // setInterval定时器方式
    function setIntervalFn() {
      let timer = null
      box1.style.left = "0px"
      timer = setInterval(() => {
        let leftVal = parseInt(box1.style.left)
        if (leftVal < 720) {
          box1.style.left = leftVal + 1 + "px"
        } else {
          clearInterval(timer)
        }
      }, 17)
    }

    // requestAnimationFrame请求动画帧方式
    function requestAnimationFrameFn() {
      box2.style.left = "0px"

      function callbackFn() {
        let leftVal = parseInt(box2.style.left)
        if (leftVal < 720) {
          box2.style.left = leftVal + 1 + "px"
          window.requestAnimationFrame(callbackFn)
        }
      }
      window.requestAnimationFrame(callbackFn)
    }

    // 动画绑定
    let btn = document.querySelector(".btn")
    btn.addEventListener("click", () => {
      setIntervalFn()
      requestAnimationFrameFn()
    })
  </script>

  <script>
    // 4 1 3 7 2 8 6 5
    async function async1() {
      console.log("1. async1 start")
      await async2()
      console.log("2. async1 end")
    }

    async function async2() {
      console.log("3. async2")
    }

    console.log("4. script start")

    setTimeout(function () {
      console.log("5. setTimeout")
    }, 0)

    requestAnimationFrame(function () {
      console.log("6. requestAnimationFrame")
    })

    async1()

    new Promise(function (resolve) {
      console.log("7. promise1")
      resolve()
    }).then(function () {
      console.log("8. promise2")
    })
  </script>
</html>
